import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Row, Col, Table, Collapse } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './DevFixDetail.less';
const { Panel } = Collapse;
const procstatus = ['待处理', '处理中', '已处理'];
const bindstatus = ['未绑定', '已绑定'];

@connect(({ devalarm, loading }) => ({
    devalarm,
    loading: loading.models.devInfo,
}))
export default class DevAlarmDet extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {
        const { dispatch } = this.props;
        const { alarmId } = this.props.match.params;
        dispatch({
            type: 'devalarm/fetchdetail',
            payload: { alarmId },
        });
    }
    renderPlayContent = (item, index) => {

        let ind = item.lastIndexOf(".");
        let img_id = item.substring(ind); //截断"."之前的，得到后缀
        console.log('index', index, img_id)
        if (img_id != ".bmp" && img_id != ".png" && img_id != ".gif" && img_id != ".jpg" && img_id != ".jpeg") {  //根据后缀，判断是否符合图片格式

            return (<Panel header={"播放内容" + (index + 1)} key={index + 1}>
                <video
                    id="video"
                    width="300"
                    height="200"
                    controls="controls"
                    autoplay="autoplay"
                >
                    <source id="mp4" src={item} />
                </video>
            </Panel>)


        } else {
            return (
                <Panel header={"播放内容" + (index + 1)} key={index + 1}>
                    <img src={item} className={styles.img} alt="" />
                </Panel>
            )
        }


    }

    render() {
        const columns = [
            {
                dataIndex: 'key',
                key: 'key',
            },
            {
                dataIndex: 'value',
                key: 'value',
            },
        ];
        const { devalarm } = this.props;
        const record = devalarm.detail;
        //console.log('record', record);
        // const dataSource = Object.keys(record).map(item=>{ return {key:item,value:record[item]}})
        const dataSource = [
            { key: '提交日期', value: record.createTime },
            { key: '设备名', value: record.devName },
            { key: 'uuid', value: record.devUuid },
            { key: '报警类型', value: record.alarmType },
            { key: '报警描述', value: record.alarmDescr },
            { key: '车牌号码', value: record.vehLicplateNo },
            { key: '处理状态', value: record.procStatus },
            { key: '所在城市', value: record.city },

        ];
        const stateSource = [];
        const netSource = [];
        //console.log('dataSource'.dataSource);
        return (
            <PageHeaderLayout>
                <Row gutter={24}>
                    <Col xl={8} lg={24} md={24} sm={24} xs={24}>
                        <Card title="基本信息" className={styles.card}>
                            <Table
                                dataSource={dataSource}
                                columns={columns}
                                showHeader={false}
                                pagination={false}
                                size="middle"
                                bordered={false}
                            />
                        </Card>
                    </Col>
                    <Col xl={8} lg={24} md={24} sm={24} xs={24}>
                        <Card title="报警图片" className={styles.card}>
                            <Collapse defaultActiveKey={['1']} >
                                <Panel header={"报警图片"} key={1}>
                                    <img src={record.alarmFileUrl} className={styles.img} alt="" />
                                </Panel>

                            </Collapse>
                        </Card>
                    </Col>
                    <Col xl={8} lg={24} md={24} sm={24} xs={24}>
                        <Card title="播放内容" className={styles.card}>
                            <Collapse defaultActiveKey={['1']} >
                                {
                                    Array.isArray(record.progMatUrl) ? record.progMatUrl.map((item, index) =>
                                        this.renderPlayContent(item, index))
                                        : null
                                }
                            </Collapse>
                        </Card>
                    </Col>
                </Row>
            </PageHeaderLayout>
        );
    }
}
